*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  scrollbar-width: none;
  list-style-type: none;
}
body{
  background-color:#f4f4f4;
}
/* 首页部分 */
header{
  /* margin: 45px auto; */
  display: flex;
  width: 100%;
  height:100%;
}
/* 侧边栏部分 */
header>aside{
  display: flex;
  width:180px;
  height:100vh;
  background-color:#951c20;
}
.aside_11{
  left: 0px;
}
/* 设置线条 */
header>aside ul{
  width: 22%;
  height: 100%;
}
header>aside>ul li{
  width: 100%;
  height:26vh;
  border-right: 1px dashed #fff;
}
header>aside>ul li:not(header>aside>ul li:first-child,header>aside>ul li:last-child){
    height: 160px;
    border-top: 1px dashed #fff;
    border-bottom: 1px dashed #fff;
}
/* 设置主要显示功能区域 */
header>aside tool{
    width: 78%;
    height: 100%;
}
/* 搜索框 */
header>aside tool>.box{
  margin:15px auto;
  width: 120px;
  height: 40px;
  background-color:rgb(255, 255, 255,0.3);
  border-radius:20px;
  border: 1px solid #a9a8a2;
  text-align: center;
  line-height: 40px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  animation: tiao 3s 5s infinite;
}
@keyframes tiao{
  0%,50%{transform: translateY(20px)}
  50%,70%{transform: translateY(-25px)}
  90%,100%{transform: translateY(0px)}
  100%{transform: translateY(20px)}
}
/* logo部分 */
header>aside tool logo{
  display: block;
  margin:0 auto;
  margin-bottom:30px;
  width: 120px;
  height: 120px;
  /* background-color:paleturquoise; */
  text-align: center;
  font-size: 12px;
  line-height:px;
}
header>aside>tool>logo>img{
    width: 100%;
    height:100px;
    line-height: 100px;
}
/* 搜索框 */
header>aside>tool>.box span,.boXx>.box1>.box2>.box1>span{
  display: block;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 25px 25px 25px 0px;
  background-color:#0e4ce7;
  text-align: center;
  line-height: 40px;
  color: #fff;
}
/* 教室、图书馆跳转部分 */
header>aside tool>ul{
  margin:0 auto;
  margin-top:60px;
  width: 120px;
  height: 200px;
  text-align: center;
}
header>aside tool>ul a{
    display:inline-block;
    margin-top: 20px;
    width: 80%;
    height: 30px;
    line-height: 30px;
    color: #fff;
}
header>.box1{
  position: absolute;
  left:150px;
  top: 250px;
  z-index: 999;
  width: 200px;
  height: 350px;
  background-color:orange;
  border-radius: 25px;
  transition: all .2s;
}
@keyframes he{
  from{transform: translateX(0px)}
  to{transform: translateX(40px)}
}
.activeBox{
  display: none;
}
header>.box1 h2{
  text-align: center;
}
header>.box1 div{
  margin-top: 20px;
    width: 100%;
    height: 80%;
    text-indent: 2em;
    /* background-color:palegreen; */
}

header>aside tool>.iconfont{
  position: absolute;
  top: 0;
  font-size: 96px;
  color: orange;
}
header>aside tool>ul li{
  transition: all .3s;
}
header>aside tool>ul li:hover{
    transform: translateX(20px);
}
header>aside tool>ul li a:hover{
    color: orange;
}
header>aside tool>ul li::before{
  content: 'O';
  position: relative;
  top: -3px;
  left:10px;
  font-size:8px;
  color:orange;
}
header>aside tool>img{
  display: block;
  margin: 0 auto;
  margin-top:13vh;
  width: 80%;
  height: 130px;
}
.boXx{
  position: absolute;
  left: 0px;
  z-index: 999;
  width:100%;
  height: 700px;
  background-color:palevioletred;
  overflow: hidden;
}
.boXx>img{
  width: 100%;
  height: 100%;
  /* display: none; */
}
.boXx>.box1{
  /* display: none; */
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color:rgb(0, 0, 0,0.5);
  overflow: hidden;
  overflow-y:auto;
}
.boXx>.box1>.iconfont{
  float: right;
  margin-top:50px;
  font-size: 46px;
  color: #006aff;
}
.boXx>.box1>.box2{
  margin:45px auto;
  width: 700px;
  height:50%;
  /* background-color:blueviolet; */
}
.boXx>.box1>.box2>h2{
  text-align: center;
  color: #fff;
}
.boXx>.box1>.box2>.box1{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 35px auto;
  width: 80%;
  height: 50px;
  border-radius:25px;
  border: 1px solid rgb(255, 255, 255,0.5);
  /* background-color:rgb(0, 220, 0); */
  cursor: pointer;
}
.boXx>.box1>.box2>.box1 input{
  padding: 5px 0px 5px 5px;
  width:66%;
  height: 50px;
  outline: none;
  font-size: 20px;
  border: none;
}
.boXx>.box1>.box2>.box1>span{
  width: 50px;
  height: 50px;
  font-size: 30px;
  line-height: 50px;
  border-radius:50% 50% 50% 0px;
  background-color:#e29c45;
}
.boXx>.box1>.box2>.box1 .resource{
  width: 140px;
  height:50px;
  line-height: 50px;
  text-align: center;
  border-right: 1px solid rgb(255, 255, 255,0.5);
  color: #fff;
  /* background-color:paleturquoise; */
}
.boXx>.box1>.box2>.box1 .resource>u{
  margin-right:10px;
}
.boXx>.box1>.box2>ul{
  margin: 15px auto;
  width: 80%;
  height:150px;
  /* background-color:palevioletred; */
  font-size: 20px;
}
.boXx>.box1>.box2>ul>li{
  float: left;
  margin-left:15px;
  margin-bottom: 20px;
  color: #fff;
}
.boXx>.box1>.box2>ul>li>input{
  width: 15px;
  height: 15px;
  border: 0px;
  outline: none;
  background-color:#e29c45;
}
.boXx>.box1>.box2>ul>li>input:checked +label::before{
  content:'√';
  position: relative;
  left:-26px;
  width: 15px;
  height: 15px;
  color: #fff;
  border-radius:50%;
  background-color:#e29c45;
}
.boXx>.box1>.box2>ul>li>input:checked+label{
  padding:5px 5px 5px;
  color:#c28f38;
  border: 1px solid #c28f38;
}
.boXx>.box1>.box2>.box3{
  margin: 0 auto;
  width:100px;
  height:30px;
  line-height: 30px;
  /* background-color:#4e79d4; */
}
.boXx>.box1>.box2>.box3 span{
  display: inline-block;
  margin-left: 5px;
  width: 15px;
  height: 15px;
  background-color:#767f15;
}
.yan{
  border: 1px solid #bdbbb1;
}
.boXx>.box1>.box2>.box3 span:nth-child(2){
  background-color:#ba2227;
}
.boXx>.box1>.box2>.box3 span:nth-child(3){
  background-color:#3e90b0;
}
.boXx>.box1>.box2>.box3 span:nth-child(4){
  background-color:#a19e8f;
}
.boXx>.box1>ol{
  display: flex;
  justify-content: center;
  flex-wrap: wrap; 
  position: absolute;
  bottom: 0;
  width:100%;
  height: 300px;
  overflow: hidden;
  overflow-y:auto;
}
.boXx>.box1>ol>li{
    float: left;
    margin-left: 10px;
    margin-top:30px;
    width: 240px;
    height: 250px;
    background-color:rgb(255, 255, 255,0.3);
    overflow: hidden;
}
.boXx>.box1>ol>li>img{
  margin-left: 50px;
  width: 60%;
  height:120px;
  transition: all 2s;
}
.boXx>.box1>ol>li>img:hover{
   position: relative;
   top: 20px;
   left:-52px;
    width: 100%;
    height: 100%;
    transform: scale(1.5);
}
.boXx>.box1>ol>li>span{
  display: block;
  margin-left:2px;
  margin-top: 10px;
  height:20px;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow:ellipsis;
}
/* 右边部分 */
header>section{
  position: relative;
  width:100%;
  height:100vh;
  background-color:#ae9b81;
  overflow: hidden;
}
/* 字体图标下拉 */
header>section>nav>.iconfont{
  display: none;
  position:fixed;
  top: 92px;
  left:0px;
  z-index:98;
  font-size: 30px;
  text-align: center;
  line-height: 45px;
  color:rgba(2, 39, 252, 0.5);
}
header>section>nav>.iconfont:hover{
  color:rgba(146, 146, 146, 0.5)
}
/* 导航栏 */
header>section>nav{
  display: flex;
  position: fixed;
  z-index:99;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100px;
  background-image:linear-gradient(0deg,rgb(0, 0, 0,0.1),rgb(0, 0, 0,0.3),rgb(0, 0, 0,0.7));
  /* background-color:pink; */
  transition: all 0.2s;
  animation:Appear1 4s;
}
@keyframes Appear1 {
  from{ top: -100px;}
  to{ top:0px;}
}
/* 显示文字 */
header>section>nav .box1{
  padding-left: 20px;
  width: 300px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  border-bottom: 1px solid rgb(255,255,255,0.5);
  animation: Appear 4s steps(22) 3s normal both;
  transition:all .3s;
  overflow: hidden;
}
@keyframes Appear {
  from{width:0;}
  to{width: 300px;}
}
/* 显示时间 */
header>section>nav>.box{
  margin-left: -200px;
  width: 200px;
  height: 50px;
  border-radius:25px;
  border: 1px solid rgb(255,255,255,0.5);
  text-align: center;
  line-height: 50px;
  color: #fff;
}
header>section>nav>.box>.iconfont{
  font-size: 20px;
}
/* 登录与注册 */
header>section>nav ul{
  display: flex;
  align-items: center;
  margin-right:100px;
  width: 200px;
  height: 50px;
  /* background-color:peru; */
}
header>section>nav ul a{
  display: block;
  margin-right:13px;
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-right: 1px solid rgb(244, 156, 105);
  color: #fff;
}
header>section>nav ul a:hover{
  color: orange;
}
header>section>img{
  float: left;
  width: 100%;
  height: 100%;
  transition: all .2s;
  animation:img1 5s 2s infinite;
}
@keyframes img1{
  from{ transform:scale(1.5)}
}
header>section>h3{
  position: absolute;
  top: 450px;
  right:200px;
  color: #fff;
  font-weight: 500;
  /* background-color:#0e4ce7; */
  transition: all .2s;
  animation:identifier 4s;
}
@keyframes identifier {
  from{transform: translateX(-150px);}
  top{transform: translateX(-150px);}
}

header>section>ul{
  display: flex;
  position: absolute;
  right:85px;
  top:490px;
  padding-top: 10px;
  width: 250px;
  height: 20px;
}
header>section>ul li{
  display: block;
  margin-right:6px;
  width: 50px;
  height:10px;
  color: #fff;
  cursor: pointer;
  background-color:#ef6464;
  border-radius: 25px;
}
.activeLi{
  background-color:#fc0000;
}
header>section>.box{
  position: absolute;
  bottom: 0px;
  width:100%;
  height: 130px;
  background-image:linear-gradient(0deg,rgb(0, 0, 0,0.7),rgb(0, 0, 0,0.3),rgb(0, 0, 0,0.1));
  transition: all .5s;
  animation: xia 4s;
}
@keyframes xia{
  from{bottom:-150px;}
  to{bottom:0px;}
}
header>section>.box ul{
  position: relative;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  width: 80%;
  height:100px;
  /* background-color:peru; */
  border-top: 1px solid #e29c45;
}
header>section>.box ul li:not(header>section>.box ul li:last-child){
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 10%;
  height: 100%;
  /* background-color:rgb(251, 206, 152); */
}
header>section>.box>ul>li:not(header>section>.box>ul>li:last-child)::before{
  content: '';
  position: absolute;
  top: -5px;
  width: 10px;
  height:10px;
  border-radius:10px;
  font-size: 62px;
  background-color: red;
}
header>section>.box ul li:not(header>section>.box ul li:last-child)>.icon-dongwuguajian2-copy33{
  font-size: 36px;
  transition: all 0.2s;
  color: #fff;
}
/* header>section>.box ul li img{
  width: 100px;;
  height: 100px;
  transition: all 0.2s;
} */
header>section>.box ul li>.icon-dongwuguajian2-copy33:hover{
  transform:perspective(800px) rotateY(180deg);
}
header>section>.box ul li:last-child{
  position: absolute;
  top: -35px;
  right:-67px;
  width:70px;
  height:70px;
  border-radius: 50px;
  line-height: 70px;
  text-align: center;
  background-color:#fff;
  color:#97ac68;
  font-weight:800;
}
/* 下面都是图书馆css部分 */
main{
  margin:0 auto;
  padding-top:70px;
  display: flex;
  width: 90%;
  height: 100vh;
}
.top .cover{
  position: absolute;
  z-index: 100;
  width:100%;
  height:1500px;
  background-color:rgb(184, 184, 184);
  opacity: 0.5;
}
.cover1{
  display:none;
}
.top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position:fixed;
  z-index: 99;
  width: 100%;
  height: 60px;
  background-color:#ffff;
  border-bottom: 2px solid gray;
  transition: all .2s;
  animation: top1 3s;
}
@keyframes top1{
  from{transform: translateY(-50px);}
  to{transform: translateY(0px);}
}
.top>.box,.top>.box1{
    display: flex;
    align-items: center;
    padding-left:12px;
    width: 500px;
    height: 50px;
}
.top .box>svg,.top .box1>svg{
  width: 30px;
  height: 30px;
}
.top>.box1{
  justify-content:flex-end;
}
.top>.box1>svg{
  margin-right: 12px;
}
.top>.box1>a:hover{
  color: orange;
}
.top>.box .search1{
    margin-left: 12px;
    padding-left:10px;
    width: 350px;
    height: 40px;
    background-color:#e9f1fc;
    border-radius: 25px;
}
.top>.box .search1>svg{
  width: 20px;
  height:20px;
}
.top .box .search1 input{
  width: 250px;
  height: 40px;
  outline: none;
  background-color:#e9f1fc;
  border:0px;
}
/* 这是主体左边部分 */
main .left{
  margin-right:15px;
  width: 20%;
  height:100vh;
}
main .left .classifiCation{
  margin: 0 auto;
  width: 90%;
  height: 70%;
}
main .left .classifiCation img{
  margin-top: 12px;
  width: 100%;
  height: 33%;
}
main>.left>.classifiCation ul{
  width: 100%;
  height: 85%;
  border-bottom: 1px solid gray;
  /* background-color:palevioletred; */
}
main>.left>.classifiCation ul a{
  display: block;
  margin-top:7px;
  padding-left:10px;
  width: 100%;
  height: 5vh;
  line-height: 30px;
  color: black;
  transition: all .2s;
}
main .left .classifiCation ul a:hover{
  background-color:gray;
  transform: translateX(20px);
}
/* 这是主体右边部分 */
main .right{
  width: 100%;
  height: 650px;
}
main>svg{
  display: none;
}
main>.right>.box{
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
}
main .right>.box span a{
    display: inline-block;
    width: 50px;
    height: 35px;
    padding-left: 12px;
    line-height:35px;
    color: gray;
}
main .right .box span .active{
  color: black;
}
.active{
  border-bottom:3px solid #4e79d4;
  color:black;
}
main .right>ul{
  width: 100%;
  height:100vh;
  /* background-color:peru; */
  overflow: hidden;
  overflow: auto;
}
main .right>ul li{
  position: relative;
    float: left;
    margin: 0 20px 20px 0px;
    height: 280px;
    background-color:#f6f8fc;
    overflow: hidden;
}
main .right>ul li .state{
    position:absolute;
    right: 0px;
    z-index: 55;
    width: 30px;
    height: 30px;
    background-color:red;
    border-radius: 25px;
    text-align: center;
    line-height:30px;
    color: #f6f8fc;
    font-weight: 600;
    font-size: 12px;
}
main>.right>ul>li .tu{
  margin-left: 22px;
  text-align: center;
  width: 160px;
  height:150px;
  background-color:#e7f0f4;
  overflow: hidden;
}
main>.right>ul>li img{
    width: 90%;
    height: 100%;
    transition: all .3s;
}
main>.right>ul>li img:hover{
      transform: scale(1.3);
}
main>.right>ul>li p{
  display: flex;
  align-items: center;
  margin-top:5px;
  width: 100%;
  height:25px;
  font-size: 15px;
}
main>.right>ul>li p b{
  display: inline-block;
  margin-left:5px;
  width: 50px;
  height:25px;
}
main>.right>ul>li p:last-child b{
  width: 190px;
}
main>.right>ul>li p span{
  display: inline-block;
  width: 213px;
  height:20px;
  overflow:hidden;
  word-wrap: normal;
  text-overflow: ellipsis;
}
.top .collection{
  position: fixed;
  top:10px;
  left: 420px;
  z-index:100;
  display: flex;
  justify-content:center;
  align-items: center;
  width: 50px;
  height: 50px;
  transition: all .2s;
  /* background-color:palegreen; */
}
.top .collection svg{
  width: 50px;
  height: 50px;
}
.top .collection:hover{
  transform: scale(1.2);
}
.top .collection span{
  display: block;
  position: relative;
  top: -10px;
  left: -10px;
  z-index: 55;
  width: 25px;
  height: 25px;
  background-color:red;
  text-align: center;
  line-height: 25px;
  border-radius:60px;
  color: #f6f8fc;
}
.top .cancel{
    position: fixed;
    top:10px;
    left:250px;
    z-index:101;
    width: 400px;
    height: 200px;
    background-color:#fff;
    border-top: 3px solid #ebeeec;
    border-right: 1px solid #ebeeec;
    border-left: 1px solid #ebeeec;
    border-bottom: 1px solid #ebeeec;
}
.cancel_1{
  display: none;
} 
.top .cancel .box{
  position: relative;
  left:380px;
  top:-10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  background-color:rgb(154, 153, 153);
  border-radius:25px;
  font-size: 36px;
  text-align: center;
  line-height: 25px;
  color: #f6f8fc;
  cursor: pointer;
}
.top .cancel .box:hover{
  background-color:rgb(193, 191, 191);
}
.top .cancel>ul{
   position:absolute;
   top: 1px;
    width: 99%;
    height: 195px;
    /* background-color:palegreen; */
    overflow: hidden;
    overflow: auto;
}
.top .cancel>ul li{
  margin-bottom: 10px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color:rgb(151, 192, 233);
}
.top .cancel>ul svg{
    margin-left: 50px;
    width: 20px;
    height: 20px;
}
/* 给收藏添加一个类 */
.active2{
  display:none;
}